<template>
  <div class="app-container">
    <el-descriptions
      class="margin-top"
      title="订单详情"
      :column="3"
      size="medium"
      border
      :label-style="lableStyle"
    >
      <template slot="extra">
        <el-button v-if="this.$store.getters.roles.includes('sys-root')" type="primary" size="small" @click="$router.push('/order/list')">返回订单列表</el-button>
        <el-button v-else type="primary" size="small" @click="$router.push('/my-order')">返回我的订单</el-button>
      </template>
      <el-descriptions-item label="订单编号" :content-style="{'width': '300px'}">
        {{ order.code }}
      </el-descriptions-item>
      <el-descriptions-item label="订单金额">
        ￥{{ order.totalPrice }}
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ parseTime(order.createTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="学员姓名">
        {{ order.courseName }}
      </el-descriptions-item>
      <el-descriptions-item label="学员电话">
        {{ order.phone }}
      </el-descriptions-item>
      <el-descriptions-item label="订单状态">
        <el-tag v-if="order.state === 0" type="success">已支付</el-tag>
        <el-tag v-else-if="order.state === 1">待付款</el-tag>
        <el-tag v-else-if="order.state === 2" type="danger">已退款</el-tag>
      </el-descriptions-item>
      <el-descriptions-item v-if="order.state !== 1" label="付款时间">
        {{ parseTime(order.payTime) }}
      </el-descriptions-item>
      <el-descriptions-item v-if="order.state === 2" label="退款时间">
        {{ parseTime(order.refundTime) }}
      </el-descriptions-item>
    </el-descriptions>
    <el-row v-show="order.state===1" type="flex" justify="end" style="margin: 20px 60px 0 0">
      <el-button type="danger" @click="handlePayOrder">立即支付</el-button>
    </el-row>
    <!--跳转支付宝使用-->
    <div v-show="false" class="payform" />
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { createByStudent, getOrderByCode } from '@/api/order'

const defaultOrder = {
  code: '',
  totalPrice: undefined,
  payId: '',
  state: undefined,
  createTime: '',
  payTime: '',
  refundTime: '',
  studentName: '',
  phone: '',
  courseName: ''
}

export default {
  name: 'Info',
  data() {
    return {
      order: Object.assign({}, defaultOrder),
      lableStyle: {
        'width': '100px',
        'text-align': 'center'
      }
    }
  },
  created() {
    this.getOrderByCode(this.$route.query.code)
  },
  methods: {
    // 格式化时间
    parseTime(time) {
      return parseTime(time, '{y}年{m}月{d}日 {h}:{i}:{s}')
    },
    // 根据订单编号,查询订单信息
    getOrderByCode(code) {
      getOrderByCode(code).then(res => {
        this.order = res.data
      })
    },
    // 订单支付
    handlePayOrder() {
      this.order.payType = 1
      // 创建订单
      createByStudent(this.order).then(res => {
        this.$notify.success({
          title: '成功',
          message: res.msg,
          duration: 2000
        })
        // 支付宝支付
        document.querySelector('.payform').innerHTML = res.data
        this.$nextTick(() => {
          document.forms[0].submit()
        })
      })
    }
  }
}
</script>

<style scoped>
</style>
